<template>
  <div class="icon-test">
    <h3>图标测试页面</h3>
    <p>测试项目中使用的所有 Element Plus 图标是否正常显示</p>

    <div class="icon-grid">
      <!-- LocationStatus 组件使用的图标 -->
      <div class="icon-section">
        <h4>LocationStatus 组件图标</h4>
        <div class="icon-row">
          <div class="icon-item">
            <el-icon size="24"><Location /></el-icon>
            <span>Location</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Position /></el-icon>
            <span>Position</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Warning /></el-icon>
            <span>Warning</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Refresh /></el-icon>
            <span>Refresh</span>
          </div>
        </div>
      </div>

      <!-- 推荐页面使用的图标 -->
      <div class="icon-section">
        <h4>推荐页面图标</h4>
        <div class="icon-row">
          <div class="icon-item">
            <el-icon size="24"><Sunny /></el-icon>
            <span>Sunny</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><MagicStick /></el-icon>
            <span>MagicStick</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Calendar /></el-icon>
            <span>Calendar</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><OfficeBuilding /></el-icon>
            <span>OfficeBuilding</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Brush /></el-icon>
            <span>Brush</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><User /></el-icon>
            <span>User</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><ShoppingBag /></el-icon>
            <span>ShoppingBag</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Star /></el-icon>
            <span>Star</span>
          </div>
        </div>
      </div>

      <!-- 常用系统图标 -->
      <div class="icon-section">
        <h4>常用系统图标</h4>
        <div class="icon-row">
          <div class="icon-item">
            <el-icon size="24"><Plus /></el-icon>
            <span>Plus</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Minus /></el-icon>
            <span>Minus</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Search /></el-icon>
            <span>Search</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Edit /></el-icon>
            <span>Edit</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Delete /></el-icon>
            <span>Delete</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Check /></el-icon>
            <span>Check</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Close /></el-icon>
            <span>Close</span>
          </div>
          <div class="icon-item">
            <el-icon size="24"><Loading /></el-icon>
            <span>Loading</span>
          </div>
        </div>
      </div>
    </div>

    <div class="test-result">
      <el-alert
        title="图标测试结果"
        description="如果上面的图标都能正常显示，说明 Element Plus Icons 配置正确"
        type="success"
        show-icon
        :closable="false"
      />
    </div>
  </div>
</template>

<script setup>
// 导入所有测试用的图标
import {
  Location,
  Position,
  Warning,
  Refresh,
  Sunny,
  MagicStick,
  Calendar,
  OfficeBuilding,
  Brush,
  User,
  ShoppingBag,
  Star,
  Plus,
  Minus,
  Search,
  Edit,
  Delete,
  Check,
  Close,
  Loading
} from '@element-plus/icons-vue'
</script>

<style scoped>
.icon-test {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

h3 {
  text-align: center;
  color: #409eff;
  margin-bottom: 10px;
}

p {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}

.icon-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.icon-section h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
  border-bottom: 1px solid #e4e7ed;
  padding-bottom: 8px;
}

.icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: white;
  transition: all 0.3s;
}

.icon-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.icon-item span {
  font-size: 12px;
  color: #666;
  text-align: center;
  word-break: break-all;
}

.test-result {
  margin-top: 30px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .icon-row {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }
  
  .icon-item {
    padding: 8px;
  }
}
</style>
